<template>
  <div class="user-adopt">
    <!-- 头部NavBar -->
    <div class="navBarBox">
      <NavBar
        title="我的领养"
        titerColor="#ff976a"
        backgroundColor="#f0f0f0"
        routerLink="/users"
      >
        <div></div>
      </NavBar>
    </div>
    <template v-if="userAdoptPetList">
      <div class="pet_list">
        <PetListItem
          v-for="item in userAdoptPetList"
          :key="item.pet_id"
          :petList="item"
          @getAdoptPetList="getAllPetList"
          @click="handlePetDetails(item.pet_id)"
        />
      </div>
    </template>
    <template v-else>
      <Empty hint="还没有领养哦" />
    </template>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar";
import PetListItem from "@/views/petTable/component/PetListItem";
import { useRouter } from "vue-router";
import { getRecommend } from "@/api/home";
import { ref } from "vue";
import { useStore } from "vuex";
import Empty from "@/components/Empty";
export default {
  name: "UserAdopt",
  components: { Empty, PetListItem, NavBar },
  setup() {
    const router = useRouter();
    //筛选领养的宠物列表
    const { userAdoptPetList, getAllPetList } = handleGetAllPetList();
    getAllPetList();
    //进入详情
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    return { userAdoptPetList, handlePetDetails, getAllPetList };
  },
};
//获取所有宠物列表
function handleGetAllPetList() {
  const store = useStore();
  const userAdoptPetList = ref([]);
  const getAllPetList = () => {
    //初始化---解决再次调用不重复push
    userAdoptPetList.value = [];
    getRecommend("all").then((res) => {
      // console.log(res);
      //筛选领养的宠物
      res.data?.forEach((item) => {
        if (item.adopter_id == store.state.user.profile.user_id) {
          // console.log(item);
          userAdoptPetList.value.push(item);
        }
      });
    });
  };
  return { userAdoptPetList, getAllPetList };
}
</script>

<style scoped lang="less">
.user-adopt {
  height: 100%;
  padding: 0.1rem 0;
  box-sizing: border-box;
  background-color: #fafafb;
  // 头部NavBar
  .navbarBox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 2.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #dfe5eb;
  }
  .pet_list {
    margin-top: 3rem;
    display: flex;
    flex-flow: wrap;
    // padding-bottom: 4rem;
    justify-content: space-between;
    padding: 0 0.3rem 3rem;
    // background-color: #f4f2f2;
  }
}
</style>
